<template>
	<view class="content">
		<view class='card'>
			<view class='cardtitle'>店铺链接</view>
			<uv-text @click="onCopy(url)" size="34rpx" type="primary" :text="url"></uv-text>
		</view>
		<view class='card'>
			<view class='cardtitle'>店铺海报</view>
			<image mode="widthFix" style="width: 100%;" :src='posterimg' v-if="posterimg"></image>
			<uv-text text="海报生成中..." v-else></uv-text>
			<view v-if="posterimg" style="text-align: center;font-size: 34rpx;margin-top: 30rpx;">请长按保存海报图或者截图保存分享</view>
		</view>
		<canvas canvas-id="poster" class="poster"></canvas>
		<uqrcode ref="uqrcode" canvas-id="qrcode" :value="url" :options="{ margin: 10 }" :auto="false" :hide="true" @complete="createPoster"></uqrcode>
		<view class='backbtn' @click="onBack">返回</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url:'',
				poster:'',
				posterimg:'',
				qr:{},
			}
		},
		onLoad() {
			var t = this;
			this.util.post('agent',{op:'link'},(r)=>{
				t.url = r.url;
				t.poster = r.poster;
				t.qr = r.qr;
			})
		},
		methods: {
			onBack(){
				uni.navigateBack()
			},
			onCopy(txt){
				uni.setClipboardData({
					data:txt
				})
			},
			createPoster(res) {
				var that = this;
				this.$refs.uqrcode.toTempFilePath({
				  success: ures => {
					  that.doPoster(ures.tempFilePath)
				  }
				});
			},
			doPoster(ures){
				var that = this;
				const ctx = uni.createCanvasContext('poster', that);
				uni.getImageInfo({
				    src: this.poster,
				    success(res) {
				        ctx.drawImage(res.path, 0,0,750,1334);
						ctx.drawImage(ures, that.qr.left, that.qr.top, that.qr.size, that.qr.size);
				        ctx.draw(true, function () {
				            uni.canvasToTempFilePath({
				                canvasId: 'poster',
				                success: function (res) {
									that.posterimg = res.tempFilePath
				                },
				            });
				        });
				    }
				});
			},
		}
	}
</script>

<style lang="scss">
.content{
	background: #f4f5f9;
	height: 100vh;
	padding: 30rpx 0;
	.poster{
		position: fixed;
		left: -2000px;
		width: 750px;
		height: 1334px;
	}
}
</style>
